define(["jquery", "jquery-cookie"], function ($) {
    async function download() {
        console.log("download开始执行");
        var code = valueByName(location.search, "code");
        $.ajax({
            method: "get",
            url: "../data/goodsDetail.json",
            success: function (arr) {
                //找到当前页面要加载的详情页面数据
                if (code == 1) {
                    var goodsMsg = arr[code - 1];

                    function show_first() {
                        var dom = $(`
                    <div class="product-right fl">
                    <h2 class="tit">
                        <span class="merchant">自营</span>
                        ${goodsMsg.title}
                    </h2>
                    <h5>${goodsMsg.sideTit}</h5>
                    <div class="price">
                        <div class="price-t">
                            <span>￥</span><i>${goodsMsg.price}</i>
                        </div>
                        <div class="price-b">
                            <span>开通PRO会员，预计可省<i> ${goodsMsg.discounts} </i></span><em class="notice"></em><a href="javascript">立即开卡
                                <i></i>
                            </a>
                        </div>
                    </div>
                    <div class="discounts">
                        <h3 class="fl">优惠</h3>
                        <div class="discounts-r fl">
                            <div>
                                <span class="fl">${goodsMsg.privilegeSecond.tit}</span>
                                <div class="detail-dis fl">
                                    <p>${goodsMsg.privilegeSecond.child}<a href="javascript:;"></a></p>
                                </div>
                            </div>
                            <div>
                                <span class="fl">${goodsMsg.privilegeThird.tit}</span>
                                <div class="detail-dis fl">
                                    <p>${goodsMsg.privilegeThird.child}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 领劵 -->
                    <div class="coupon">
                        <h3 class="fl">优惠</h3>
                        <div>
                            <span><em></em><i>${goodsMsg.coupon[0].first}</i><a href="">${goodsMsg.coupon[0].second}</a><em></em></span>
                            <span><em></em><i>${goodsMsg.coupon[1].first}</i><a href="">${goodsMsg.coupon[0].second}</a><em></em></span>
                            <span><em></em><i>${goodsMsg.coupon[2].first}</i><a href="">${goodsMsg.coupon[0].second}</a><em></em></span>
                        </div>
                    </div>
                    <!-- 评价 -->
                    <div class="evaluate">
                        <h3 class="fl">${goodsMsg.evaluate.tit}</h3>
                        <div>
                            <a href="javascript:;">${goodsMsg.evaluate.child[0]}<i>(25)</i></a>
                            <a href="javascript:;">${goodsMsg.evaluate.child[1]}<i>(25)</i></a>
                            <a href="javascript:;">${goodsMsg.evaluate.child[2]}<i>(25)</i></a>
                        </div>
                    </div>
                    <!-- 颜色 -->
                    <div class="color">
                        <h3 class="fl">颜色</h3>
                        <div>
                            <a href="javascript:;"><img src="${goodsMsg.color[0].url}" alt="">${goodsMsg.color[0].tit}</a>
                        </div>
                    </div>
                    <!-- 规格 -->
                    <div class="size">
                        <h3 class="fl">${goodsMsg.size.tit}</h3>
                        <div>
                            <a href="javascript:;">${goodsMsg.size.child[0]}</a>
                            <a href="javascript:;">${goodsMsg.size.child[1]}</a>
                        </div>
                    </div>
                    <!-- 数量 -->
                    <div class="num">
                        <h3 class="fl">数量</h3>
                        <div>
                            <button>-</button>
                            <input type="text" value="1">
                            <button>+</button>
                            <span>库存<i>${goodsMsg.num[0]}</i></span>
                            <span>限购<i>${goodsMsg.num[1]}</i></span>
                        </div>
                    </div>
                    <!-- 配送 -->
                    <div class="distribution">
                        <h3 class="fl">配送</h3>
                        <div>
                            <p class="fl">
                                <span>江西省</span>
                                <span>南昌市</span>
                                <span>进贤县</span>
                                <em></em>
                            </p>
                            <i>有货</i>
                        </div>
                    </div>
                    <!-- 服务 -->
                    <div class="sever">
                        <h3 class="fl">服务</h3>
                        <div>
                            <span>延长保修<a href="javascript:;"></a></span>
                        </div>
                    </div>
                    <!-- 供货商 -->
                    <div class="supplier">
                        <h3 class="fl">服务</h3>
                        <div>
                            <span>美的官方商城</span>
                        </div>
                    </div>
                    <p class="login" code=${goodsMsg.code}>加入购物车</p>
                    <p class="bottom"><span>美的唯一官方商城<i></i></span><span>全国联保<i></i></span><span>全场包邮<i></i></span>
                    </p>
                </div>
                    
                    `).appendTo(".product");
                    }
                    show_first();
                }
                if (code == 2) {
                    var goodsMsg = arr[code - 1];

                    function show_first() {
                        console.log(222);
                        var dom = $(`
                    <div class="product-right fl">
                    <h2 class="tit">
                        <span class="merchant">自营</span>
                        ${goodsMsg.title}
                    </h2>
                    <h5>${goodsMsg.sideTit}</h5>
                    <div class="price">
                        <div class="price-t">
                            <span>￥</span><i>${goodsMsg.price}</i>
                        </div>
                        <div class="price-b">
                            <span>开通PRO会员，预计可省<i> ${goodsMsg.discounts} </i></span><em class="notice"></em><a href="javascript">立即开卡
                                <i></i>
                            </a>
                        </div>
                    </div>
                    <div class="discounts">
                        <h3 class="fl">优惠</h3>
                        <div class="discounts-r fl">
                            
                            <div>
                                <span class="fl">${goodsMsg.privilegeSecond.tit}</span>
                                <div class="detail-dis fl">
                                    <p>${goodsMsg.privilegeSecond.child}<a href="javascript:;"></a></p>
                                </div>
                            </div>
                            <div>
                                <span class="fl">${goodsMsg.privilegeThird.tit}</span>
                                <div class="detail-dis fl">
                                    <p>${goodsMsg.privilegeThird.child}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 领劵 -->
                    <div class="coupon">
                        <h3 class="fl">优惠</h3>
                        <div>
                            <span><em></em><i>${goodsMsg.coupon[0].first}</i><a href="">${goodsMsg.coupon[0].second}</a><em></em></span>
                            <span><em></em><i>${goodsMsg.coupon[1].first}</i><a href="">${goodsMsg.coupon[0].second}</a><em></em></span>
                        </div>
                    </div>
                    <!-- 评价 -->
                    <div class="evaluate">
                        <h3 class="fl">${goodsMsg.evaluate.tit}</h3>
                        <div>
                            <a href="javascript:;">${goodsMsg.evaluate.child[0]}<i>(25)</i></a>
                            <a href="javascript:;">${goodsMsg.evaluate.child[1]}<i>(25)</i></a>
                            <a href="javascript:;">${goodsMsg.evaluate.child[2]}<i>(25)</i></a>
                        </div>
                    </div>
                    <!-- 颜色 -->
                    <div class="color">
                        <h3 class="fl">颜色</h3>
                        <div>
                            <a href="javascript:;"><img src="${goodsMsg.color[0].url}" alt="">${goodsMsg.color[0].tit}</a>
                        </div>
                    </div>
                    <!-- 规格 -->
                    <div class="size">
                        <h3 class="fl">${goodsMsg.size.tit}</h3>
                        <div>
                            <a href="javascript:;">${goodsMsg.size.child[0]}</a>
                            <a href="javascript:;">${goodsMsg.size.child[1]}</a>
                            <a href="javascript:;">${goodsMsg.size.child[2]}</a>
                         </div>
                    </div>
                    <!-- 数量 -->
                    <div class="num">
                        <h3 class="fl">数量</h3>
                        <div>
                            <button>-</button>
                            <input type="text" value="1">
                            <button>+</button>
                            <span>库存<i>${goodsMsg.num[0]}</i></span>
                            <span>限购<i>${goodsMsg.num[1]}</i></span>
                        </div>
                    </div>
                    <!-- 配送 -->
                    <div class="distribution">
                        <h3 class="fl">配送</h3>
                        <div>
                            <p class="fl">
                                <span>江西省</span>
                                <span>南昌市</span>
                                <span>进贤县</span>
                                <em></em>
                            </p>
                            <i>有货</i>
                        </div>
                    </div>
                    <!-- 服务 -->
                    <div class="sever">
                        <h3 class="fl">服务</h3>
                        <div>
                            <span>延长保修<a href="javascript:;"></a></span>
                        </div>
                    </div>
                    <!-- 供货商 -->
                    <div class="supplier">
                        <h3 class="fl">服务</h3>
                        <div>
                            <span>美的官方商城</span>
                        </div>
                    </div>
                    <p class="login">加入购物车</p>
                    <p class="bottom"><span>美的唯一官方商城<i></i></span><span>全国联保<i></i></span><span>全场包邮<i></i></span>
                    </p>
                </div>
                    
                    `).appendTo(".product");
                    }
                    show_first();
                }


                console.log(goodsMsg);
                //找到详情页加载的图片
            },
            error: function (msg) {
                console.log(msg);
            },
        });
        await $.ajax({
            method: "get",
            url: "../data/goodsImg.json",
            success: function (arr) {
                //找到当前页面要加载的详情页面数据
                //找到详情页加载的图片
                if (code == 1) {
                    var goodsMsg = arr[code - 1];
                    var bigImg = goodsMsg.bigImg;
                    var smallImg = goodsMsg.smallImg;
                    var img = goodsMsg.img;
                    var $bImg = $(".bImg");
                    var $mImg = $("#mImg");
                    $bImg.attr("src", bigImg[0]);
                    $mImg.attr("src", img[0]);
                    $("#icon_list").append(
                        $(
                            `
                      <li class="activeChange"><img src="${goodsMsg.smallImg[0]}" /></li>
                      <li><img src="${goodsMsg.smallImg[1]}" /></li>
                      <li><img src="${goodsMsg.smallImg[2]}" /></li>
                 `
                        )
                    );
                    move();
                    changeImg({
                        bigImg: bigImg,
                        smallImg: smallImg,
                        img: img,
                    });
                }
                if (code == 2) {
                    var goodsMsg = arr[code - 1];
                    var bigImg = goodsMsg.bigImg;
                    var smallImg = goodsMsg.smallImg;
                    var img = goodsMsg.img;
                    var $bImg = $(".bImg");
                    var $mImg = $("#mImg");
                    $bImg.attr("src", bigImg[0]);
                    $mImg.attr("src", img[0]);
                    $("#icon_list").append(
                        $(
                            `
                      <li class="activeChange"><img src="${goodsMsg.smallImg[0]}" /></li>
                      <li><img src="${goodsMsg.smallImg[1]}" /></li>
                      <li><img src="${goodsMsg.smallImg[2]}" /></li>
                      <li><img src="${goodsMsg.smallImg[3]}" /></li>
                      <li><img src="${goodsMsg.smallImg[4]}" /></li>
                 `
                        )
                    );
                    move();
                    changeImg({
                        bigImg: bigImg,
                        smallImg: smallImg,
                        img: img,
                    });
                }
            },
            error: function (msg) {
                console.log(msg);
            },
        });

        function move() {
            var mask = document.querySelector("#mask");
            // console.log(document.querySelector("#mask"));
            $("#mediumDiv")
                .mouseenter(function () {
                    $("#mask").css("display", "block");
                    $("#largeDiv").css("display", "block");
                })
                .mouseleave(function () {
                    $("#mask").css("display", "none");
                    $("#largeDiv").css("display", "none");
                })
                .mousemove(function (e) {
                    var e = e || event;
                    var x = e.pageX - $("#mediumDiv").offset().left;
                    var y = e.pageY - $("#mediumDiv").offset().top;
                    var maskX = x - $("#mask").width() / 2;
                    var maskY = y - $("#mask").height() / 2;
                    var maskxMax = $("#mImg").width() - $("#mask").width();
                    var maskyMax = $("#mImg").height() - $("#mask").width();
                    if (maskX <= 0) {
                        maskX = 0;
                    }
                    if (maskX >= maskxMax) {
                        maskX = maskxMax;
                    }
                    if (maskY <= 0) {
                        maskY = 0;
                    }
                    if (maskY >= maskyMax) {
                        maskY = maskyMax;
                    }
                    mask.style.left = maskX + "px";
                    mask.style.top = maskY + "px";
                    var bidXMax = $(".bImg").width() - $("#largeDiv").width();
                    var bidYMax = $(".bImg").height() - $("#largeDiv").height();
                    console.log(bidXMax);
                    var bidX = (maskX * bidXMax) / maskxMax;
                    var bidY = (maskY * bidYMax) / maskyMax;
                    $(".bImg")[0].style.left = -bidX + "px";
                    $(".bImg")[0].style.top = -bidY + "px";
                    // $('#largeDiv').css('left', '-bidX');
                    // $('#largeDiv').css('top', '-bidY');
                });
        }

        function changeImg(option) {
            $("#preview").on("mouseenter", "#icon_list li", function () {
                var index = $(this).index();
                $(this).addClass("activeChange").siblings().removeClass("activeChange");
                $(".bImg").attr("src", option.bigImg[index]);
                $("#mImg").attr("src", option.img[index]);
            });
        }
    }
    //tab切换
    $('.tab li').click(function () {
        var j = $(this).index();
        console.log(j);
        $(this).css({
            borderBottom: "2px solid #0093d5"
        }).siblings().css({
            borderBottom: "none"
        })
        console.log($('.tab-con').children());
        $('.tab-con').children().eq(j).css('display', 'block').siblings().css('display', 'none')
    })



    $('.product').on('click', '.login', function () {
        // 如果没有商品则加入商品到购物车里;
        let goodsArr = [];
        if (localStorage.getItem("goods")) {
            goodsArr = JSON.parse(localStorage.getItem("goods"));
        }
        let code = $(this).attr("code");
        // 设置一个标志属性
        let flag = false;
        $.each(goodsArr, function (index, item) {
            if (item.code === code) {
                item.num++;
                flag = true;
                return false;
            }
        });
        // 如果购物车里含有数据则值进行数量加一
        if (!flag) {
            goodsArr.push({
                code: code,
                num: 1
            });
        }
        //    数据存储到本地
        localStorage.setItem("goods", JSON.stringify(goodsArr));
        alert("添加成功");
    });


    //根据指定的url获取需要操作的元素信息键值对
    function valueByName(search, name) {
        var start = search.indexOf(name + "=");
        if (start == -1) {
            return null;
        } else {
            var end = search.indexOf("&", start);
            if (end == -1) {
                end = search.length;
            }
            //提取出想要键值对 name=value
            var str = search.substring(start, end);
            var arr = str.split("=");
            return arr[1];
        }
    }

    return {
        download: download,
    };
});